<script setup lang="ts">
import {onMounted, ref} from "vue";
import {BillboardCollection, Viewer, Ion, Cesium3DTileset, Cartographic, Math, Cartesian3, Matrix4} from "cesium";
import baseService from "@/service/baseService";


const userList = ref();
baseService.get("/old/olddeparts/page", {limit: 800, page: 1}).then((res: any) => {
  userList.value = res.data.list;
})

const value = ref();
const input = ref();
const showFlag = ref(false);

const selectChange = () => {
  showFlag.value = true;
}

const clickDialog = () => {
  showFlag.value = false;
}

let viewer: Viewer;
const billboards = ref();
Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4ZmI5YzQwOS1jNmM3LTRmMjQtODZkMC0xNDgyOWE5ZjhhZDYiLCJpZCI6MTMwOTU1LCJpYXQiOjE3MDAxMTM5ODB9.3UB8KQF9s1SUZdnCvd_3Yghz2sABYtX85O93ija2ZoE";
onMounted(() => {
  viewer = new Viewer("cesiumContainer", {
    geocoder: false, //控制右上角第一个位置的查找工具
    homeButton: false, //控制右上角第二个位置的home图标
    sceneModePicker: false, //控制右上角第三个位置的选择视角模式，2d，3d
    baseLayerPicker: false, //控制右上角第四个位置的图层选择器
    navigationHelpButton: false, //控制右上角第五个位置的导航帮助按钮
    animation: false, //控制左下角的动画器件
    timeline: false, //控制下方时间线
    fullscreenButton: false, //右下角全屏按钮
    selectionIndicator: false, // 绿色得选择框
    infoBox: false, //去掉右上角提示框
    vrButton: false //右下角vr按钮
  });
  billboards.value = viewer.scene.primitives.add(new BillboardCollection());
  // @ts-ignore
  viewer.cesiumWidget.creditContainer.style.display = "none"; //取消版权信息
  viewer.scene.highDynamicRange = true;
  // 初始化地图
  const tileset = new Cesium3DTileset({
    url: "https://project.jiusegongyi.com/new3DT/tileset.json",
    // url: "https://moujia.mkcom.cn/3DTiles/Scene/3DTiles.json",
    skipLevelOfDetail: true,
    baseScreenSpaceError: 1024,
    maximumScreenSpaceError: 8, // 数值加大，能让最终成像变模糊
    skipScreenSpaceErrorFactor: 16,
    skipLevels: 0,
    immediatelyLoadDesiredLevelOfDetail: true,
    loadSiblings: false, // 如果为true则不会在已加载完概况房屋后，自动从中心开始超清化房屋
    cullWithChildrenBounds: true,
    cullRequestsWhileMoving: true,
    cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除
    preloadWhenHidden: true,
    preferLeaves: true,
    maximumMemoryUsage: 1024, // 内存分配变小有利于倾斜摄影数据回收，提升性能体验
    progressiveResolutionHeightFraction: 0.3, // 数值偏于0能够让初始加载变得模糊
    dynamicScreenSpaceErrorDensity: 1, // 数值加大，能让周边加载变快
    dynamicScreenSpaceErrorFactor: 10, // 不知道起了什么作用没，反正放着吧先
    dynamicScreenSpaceError: false // 根据测试，有了这个后，会在真正的全屏加载完之后才清晰化房屋
  });
  tileset.readyPromise.then(function (tileset: any) {
    //笛卡尔转换为弧度
    let cartographic = Cartographic.fromCartesian(tileset.boundingSphere.center);
    let lng = Math.toDegrees(cartographic.longitude); //使用经纬度和弧度的转换，将WGS84弧度坐标系转换到目标值，弧度转度
    let lat = Math.toDegrees(cartographic.latitude);
    //计算中心点位置的地表坐标
    let surface = Cartesian3.fromDegrees(lng, lat, 10);
    //偏移后的坐标
    let offset = Cartesian3.fromDegrees(lng, lat, 210);
    let translation = Cartesian3.subtract(offset, surface, new Cartesian3());
    tileset.modelMatrix = Matrix4.fromTranslation(translation);
    viewer.flyTo(tileset, {
      duration: 4,
      maximumHeight: 100,
      offset: {
        // 指向
        heading: Math.toRadians(0),
        // 视角
        pitch: Math.toRadians(-60),
        range: 0.0
      }
    });
    viewer.scene.primitives.add(tileset);
  });
})
</script>

<template>
  <div id="cesiumContainer"></div>
  <div class="showBox">
    <el-select v-model="value" class="m-2" placeholder="请选择标签" style="width: 6vw;" clearable>
      <el-option label="党员" :value="1"/>
      <el-option label="军人" :value="2"/>
      <el-option label="低保户" :value="3"/>
      <el-option label="五保户" :value="4"/>
    </el-select>
    <el-select style="width: 8vw;display: inline-block;margin-left: 0.1vw" filterable v-model="input"
               placeholder="村民姓名"
               @change="selectChange"
               clearable>
      <el-option v-for="item in userList" :key="item.id" :label="item.departname" :value="item.id"/>
    </el-select>
  </div>
  <transition name="show">
    <div v-show="showFlag" class="cesiumContainer_right">
      <div style="padding: 2.5vh 2vw; font-size: 1.5vw;color:#FFFFFF;">村民信息</div>
      <div class="close_header" @click="clickDialog">
        <img src="@/assets/images/screen/close.png" alt=""/>
      </div>
    </div>
  </transition>
</template>

<style scoped lang="less">
#cesiumContainer {
  width: 100%;
  height: 93.1vh;
}

.showBox {
  position: fixed;
  z-index: 999;
  top: 10vh;
  left: 2vw;
}

.show-enter-active,
.show-leave-active {
  transition: all 0.3s linear;
}

.show-enter-from,
.show-leave-to {
  transform: translateX(100%);
  width: 0;
}

.cesiumContainer_right {
  * {
    box-sizing: border-box;
  }

  user-select: none;
  position: absolute;
  width: 30%;
  height: 80%;
  background: linear-gradient(0deg, #132d3b 0%, rgba(17, 42, 56, 1) 49%, #112d3d 100%);
  right: 1%;
  top: 10%;
  border-radius: 0.5vw;
  z-index: 99;

  .close_header {
    position: absolute;
    right: 3%;
    top: 3%;
    cursor: pointer;

    img {
      width: 1.5vw;
      height: 1.5vw;
    }
  }
}
</style>
